import { defineStore } from 'pinia';
import { store } from '/@/store';
import type { VNodeRef } from 'vue';
import { AForm } from '/@/views/config-center/design-form-list/components/form-design/typings/v-form-component';

interface FormDesignState {
  formPropsRef: Nullable<VNodeRef>;
  formItemPropsRef: Nullable<VNodeRef>;
  formComponentPropsRef: Nullable<VNodeRef>;
}

export const useFormDesignStore = defineStore({
  id: 'form-design',
  state: (): FormDesignState => ({
    formPropsRef: null,
    formItemPropsRef: null,
    formComponentPropsRef: null,
  }),
  getters: {
    getFormPropsRef(): Nullable<AForm> {
      return this.formPropsRef;
    },
    getFormItemPropsRef(): Nullable<AForm> {
      return this.formItemPropsRef;
    },
    getFormComponentPropsRef(): Nullable<AForm> {
      return this.formComponentPropsRef;
    },
  },
  actions: {
    setFormPropRef(ref: Nullable<VNodeRef>) {
      this.formPropsRef = ref;
    },
    setFormItemPropsRef(ref: Nullable<VNodeRef>) {
      this.formItemPropsRef = ref;
    },
    setFormComponentPropsRef(ref: Nullable<VNodeRef>) {
      this.formComponentPropsRef = ref;
    },
  },
});

export function useFormDesignStoreWithOut() {
  return useFormDesignStore(store);
}
